<template>
    <div class="branch common-tabs-wrap">
        <Card :padding="0" class="card-body-grey">
            <p slot="title">
                基础信息
            </p>
            <Row class='branch-base'>
                <Col span='10' class='branch-base-left'>
                    <Row class='branch-base-left-line'>
                        房源数量：
                        <span v-for='(v,k) in item.homes_info'>&nbsp;&nbsp;{{ k==1 ? '分散式' : '集中式' }}&nbsp;&nbsp;{{v}}套</span>
                    </Row>
                    <Row class='branch-base-left-line'>
                        <span>员工：</span>
                        <span v-for='(v,k) in item.users_info'>&nbsp;&nbsp;{{k}}&nbsp;&nbsp;{{v}}名
                        </span>
                        <span v-if='Object.keys(item.users_info).length == 0'>暂无</span>
                    </Row>
                </Col>
                <Col span='14'>
                    <Row class='branch-base-left-line'>
                        常用操作：
                        <Button type='ghost' class='yd-button' @click="toHouse">管理房源</Button>
                        <Button type='ghost' class='yd-button' @click="toStaff">管理人员</Button>
                    </Row>
                 <!--    <Row class='branch-base-left-line'>
                        门店自助提现权限：
                        <Button type='ghost' class='yd-button' @click='saveAccount(4)'  v-show='!setCash'>保存</Button>
                        <Button type='ghost' class='yd-button' @click='setCash=false' v-show='setCash'>修改</Button>
                    </Row> -->
                   <!--  <Row class='branch-base-left-line'>
                        状态：
                        <Select v-model="status" placeholder="请选择" style='width:300px' :disabled='setCash'>
                            <Option value='2'>禁止门店自行提现</Option>
                            <Option value='1'>允许门店自行提现</Option>
                        </Select>
                    </Row> -->
                </Col>
            </Row>
        </Card>
        <Tabs type='card' class="list-tab">
            <TabPane label='收款账户'>
                <Row :gutter="16">
                    <Col span="8">
                        <Card class="bg-white" :padding="0">
                            <p slot="title" class="sub-title">
                                <span class="account-type">银行卡信息</span>
                            </p>
                            <span slot='extra'>
                                <Button type='primary' @click='saveAccount(1)' v-pmis="34">
                                    编辑
                                </Button>
                                <!-- <Button type='primary' @click='readonly1=false' v-show='readonly1'>
                                    修改
                                </Button> -->
                            </span>
                            <Row class='branch-account'>
                                  <Row class="branch-account-line" type='flex' justify='center' align='middle'>
                                    <Col span='8'>银行户名：</Col>
                                    <Col span='16'>
                                        <!-- <Input v-model="bank.name" placeholder="银行卡名称" :readonly ='readonly1'></Input> -->
                                        {{bank.name?bank.name:'暂无'}}
                                    </Col>
                                </Row>
                                <Row class="branch-account-line" type='flex' justify='center' align='middle'>
                                    <Col span='8'>银行账号：</Col>
                                    <Col span='16'>
                                        <!-- <Input v-model="bank.card" placeholder="银行账号" :readonly ='readonly1'></Input> -->
                                        {{bank.card?bank.card:'暂无'}}
                                    </Col>
                                </Row>
                                <Row class="branch-account-line" type='flex' justify='center' align='middle'>
                                    <Col span='8'>开户银行：</Col>
                                    <Col span='16'>
                                        <!-- <Input v-model="bank.bank" placeholder="开户银行" :readonly ='readonly1'></Input> -->
                                        {{bank.bank?bank.bank:'暂无'}}
                                    </Col>
                                </Row>
                            </Row>
                        </Card>
                    </Col>
                </Row>
            </TabPane>
        </Tabs>

        <Modal v-model="addAccount" :closable='false' :mask-closable=false :width="500">
                    <h3 slot="header" style="color:#2D8CF0">编辑银行卡信息</h3>
                    <Form ref="account" :model="accountForm" :rules="passValidate" :show-message="false">
                       <!--  <FormItem prop="type">
                            <Select style="width:100%" v-model='accountForm.type' transfer placeholder='账户类型'>
                                <Option v-for='(item,index) in accountType' :key='index' :value='item.type'>{{item.label}}</Option>
                            </Select>
                        </FormItem> -->
                        <FormItem prop="card">
                            <Input v-model="accountForm.card" placeholder="请输入账号" ></Input>
                        </FormItem>
                        <FormItem prop="name">
                            <Input v-model="accountForm.name" placeholder="请输入户名" ></Input>
                        </FormItem>
                        <!-- <FormItem prop="tname">
                            <Input v-model="accountForm.tname" placeholder="请输入真实姓名" ></Input>
                        </FormItem> -->
                        <FormItem prop="bank" v-if='accountForm.type == 1' :rules="{required: true, message: 'Item can not be empty', trigger: 'blur'}">
                            <Input v-model="accountForm.bank" placeholder="请输入开户行"></Input>
                        </FormItem>
                        <FormItem>
                            <Row type='flex' justify='start' align='middle'>
                                <span>图形验证码:</span>
                                <captcha :reset="reset" @on-success="success" style='width:82%;margin-left:10px;'></captcha></captcha>
                            </Row>
                        </FormItem>
                        <FormItem>
                            <span>手机号:</span>{{this.phone | phoneNumber}}
                        </FormItem>
                        <FormItem prop="code">
                            <Row>
                                <Col span='18'>
                                    <Input v-model="accountForm.code" placeholder="请输入验证码"></Input>
                                </Col>
                                <Col span='4' offset='1'>
                                    <Button type='primary' @click='sendCode' :disabled='canGetIdentifyCode'>{{gettingIdentifyCodeBtnContent}}</Button>
                                </Col>
                            </Row>
                        </FormItem>
                       <!--  <FormItem prop='cash_type'>
                            <Select v-model='accountForm.cash_type' transfer placeholder='授权门店自行提现'>
                                <Option value='1'>开启</Option>
                                <Option value='2'>禁用</Option>
                            </Select>
                        </FormItem> -->
                        <div class='text-center'>注：银行卡信息涉及资金安全，请验证身份</div>
                    </Form>
                    <div slot="footer">
                        <Button type="ghost" @click="addAccount=false">取消</Button>
                        <Button type="primary"  @click="sureAdd('account')">保存</Button>
                    </div>
                </Modal>
    </div>
</template>

<script>
import { http, api } from '@/libs/http'
// import storeDetail from '@/views/stores/store-components/storeDetail';
import captcha from '@/views/captcha'
export default {
  name: 'branch_index',
  props: {
    item: Object
  },
  created () {
    this.getClientPhone()
    if (this.item && this.item.branch_account && this.item.branch_account.bank_account) {
      this.bank = this.item.branch_account.bank_account
    }
  },
  data () {
    return {
      readonly1: true,
      readonly2: true,
      readonly3: true,
      save: false,
      save2: false,
      reset: false,
      setCash: true,
      phone: '',
      addAccount: false,
      accountForm: {
        type: 1,
        card: '',
        tname: '',
        code: '',
        number: '',
        cash_type: null,
        pictureCode: '',
        bank: ''
      },
      account: {
        code: ''
      },
      canGetIdentifyCode: false, // 是否可点获取验证码
      gettingIdentifyCodeBtnContent: '获取验证码', // “获取验证码”按钮的文字
      pictureCode: '',
      type: '',
      bank: {
        name: '',
        card: '',
        bank: ''
      },
      ali: {
        name: '',
        card: ''
      },
      wechat: {
        name: '',
        card: ''
      },
      passValidate: {
        type: [{ required: true, type: 'number', message: '请输入原密码', trigger: 'blur' }],
        card: [{ required: true, type: 'string', message: '请输入原密码', trigger: 'blur' }],
        name: [{ required: true, type: 'string', message: '请输入原密码', trigger: 'blur' }],
        code: [{ required: true, type: 'string', message: '请输入原密码', trigger: 'blur' }],
        cash_type: [{ required: true, type: 'string', message: '请输入原密码', trigger: 'blur' }]
      },
      status: '1',
      pass: {
        code: [
          {
            required: true,
            type: 'string',
            message: '请输入原密码',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    sureAdd (name) {
      this.$refs[name].validate(valid => {
        if (!valid) {
          return
        }
        let account = this.accountForm
        let data = {
          type: account.type,
          card: account.card,
          name: account.name,
          cash_type: parseInt(account.cash_type),
          msg_code: account.code,
          bank: account.bank
        }
        let branch_id = parseInt(this.item.id)
        http.request(this, api.branch_update_account, [branch_id], data, (res, err) => {
          if (!res || err) {
            return
          }
          this.addAccount = false
          this.$emit('on-refresh')
          this.accountForm.pictureCode = ''
          this.$refs[name].resetFields()
        })
      })
    },
    saveAccount (n) {
      this.type = n
      // this.save = true;
      this.addAccount = true
      this.reset = !this.reset
      switch (n) {
        case 1:
          this.readonly1 = true
          break
        case 2:
          this.readonly2 = true
          break
        case 3:
          this.readonly3 = true
          break
      }
    },
    success (res) {
      this.accountForm.pictureCode = res
    },
    saveStatus () {
      this.setCash = true
      http.request(this, api.branch_set_cash, [this.item.id], { type: parseInt(this.status), msg_code: this.account.code }, (res, err) => {
        if (!res || err) {
          return
        }
        this.pictureCode = ''
        this.account.code = ''
      })
    },
    getClientPhone () {
      http.request(this, api.client_phone_info, null, null, (res, err) => {
        if (!res || err) {
          return
        }
        this.phone = res.phone
      })
    },
    sendCode () {
      if (this.accountForm.pictureCode === '') {
        this.$Message.warning('请先完成图形验证码')
        return
      }
      http.request(this, api.sms, null, { captcha_code: this.accountForm.pictureCode }, (res, err) => {
        if (err || !res) {
          return
        }
        this.canGetIdentifyCode = true
        let timeLast = 60
        let timer = setInterval(() => {
          if (timeLast >= 0) {
            this.gettingIdentifyCodeBtnContent = timeLast + '秒后重试'
            timeLast -= 1
          } else {
            clearInterval(timer)
            this.gettingIdentifyCodeBtnContent = '获取验证码'
            this.canGetIdentifyCode = false
          }
        }, 1000)
      })
    },
    toHouse () {
      this.$router.push({
        path: '/house/home-list',
        query: { radio: this.item.id }
        // query:{
        //     branch_id : this.item.id
        // }
      })
    },
    toStaff () {
      this.$router.push({
        path: '/staff/index',
        query: { select: this.item.id }
        // query:{
        //     branch_id : this.item.id
        // }
      })
    }
  },
  filters: {
    phoneNumber: function (input) {
      return input.slice(0, 3) + '****' + input.slice(7, 11)
    }
  },
  components: {
    captcha
  }
}
</script>
<style lang="less" scoped>
@import '../../../styles/common.less';
.list-tab {
    margin: 10px 0 0;
}
.bg-white {
    background-color: #fff;
}
.branch {
    &-base {
        padding: 10px 0;
        height: 233px;
        &-left {
            border-right: 1px dashed #ccc;
            height: 213px;
            &-line {
                padding: 15px 0 5px 20px;
                font-size: 14px;
                color: #000000;
            }
        }
    }
    &-account {
        height: 232px;
        padding: 34px 30px;
        font-size: 14px;
        color: #5b5b5b;
        &-line {
            margin-bottom: 23px;
            .input {
                width: 71%;
            }
        }
    }
}
</style>
